<template>
  <div>
    <a-drawer :visible="visible" :title="modalTitle" width="60%" @close="handleClose">
      <a-card :bordered="false">
        <f-table ref="table" size="default" rowKey="userId" :columns="columns" :operator="operator" :params="queryParam" :api="api.appAccount" :autoLoad="false" :multiple="false">
        <span slot="accountType" slot-scope="text, record, index">
          <a-tag color="pink" v-if="text=='USERNAME'">普通账户</a-tag>
          <a-tag color="red" v-if="text=='MOBILE'">手机账户</a-tag>
          <a-tag color="orange" v-if="text=='WEIXIN'">微信账户</a-tag>
          <a-tag color="orange" v-if="text=='QQ'">QQ账户</a-tag>
        </span>
          <span slot="avatar" slot-scope="text, record, index">
          <img v-lazy="record.avatar" v-viewer class="radius-img">
        </span>
          <span slot="action" slot-scope="text, record">
          <template>
           <a href="javascript:;" v-if="record.accountType!='MOBILE'" @click="$refs.table.remove(record.accountId)">删除</a>
            <a-divider type="vertical"/>
          </template>
        </span>
        </f-table>
      </a-card>
    </a-drawer>
  </div>
</template>

<script>
  export default {
    name: 'UserAccount',
    components: {},
    data() {
      return {
        visible: false,
        title: '账户列表',
        userName: '',
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [

          {
            title: '账户名',
            align: 'center',
            dataIndex: 'account'
          },

          {
            title: '头像',
            align: 'center',
            dataIndex: 'avatar',
            scopedSlots: { customRender: 'avatar' }
          },
          {
            title: '账户类型',
            align: 'center',
            dataIndex: 'accountType',
            scopedSlots: { customRender: 'accountType' }
          },
          {
            title: '昵称',
            align: 'center',
            dataIndex: 'nickName'
          },
          {
            title: '创建日期',
            align: 'center',
            dataIndex: 'createTime',

            sorter: true
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        operator: []
      }
    },
    computed: {
      modalTitle: function() {
        return this.userName + '-' + this.title
      }
    },
    created() {

    },
    methods: {
      handleShow(data) {
        this.userName = ''
        this.visible = true
        this.userName = data.userName
        this.queryParam.userId = data.userId
        let me = this
        setTimeout(function() {
          me.$refs.table.refresh(true)
        }, 200)
      },
      handleClose() {
        this.visible = false
      },
      setStatus(record) {
        this.http.post(this, {
          url: this.api.frontUser.setStatus,
          data: {
            userId: record.userId
          },
          success(me, data) {
            record.status = data
          }
        })
      }
    }
  }
</script>
